import { defineComponent, reactive, ref,onMounted } from 'vue'
import {useRouter} from 'vue-router'
import type { Login } from '@/type/user'
import type { FormInstance } from 'element-plus'
import './index.scss'
// import { ElNotification } from 'element-plus/lib/components'
export default defineComponent({
    setup() {
        const form = reactive<Login>({ name: 'admin', password: '123456' })
        const formRules = {
            name: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
            password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        }
        const formRef = ref<FormInstance>()
        const router = useRouter()
        onMounted(() => {
            ElNotification({
                title: '提示',
                message: '用户名：admin，密码：123456',
                duration: 0
            })
        })
        const handleLogin = () => {
            if (!formRef.value) return
            formRef.value.validate((valid) => {
                if (valid) {
                    if (form.name === 'admin' && form.password === '123456') {
                        router.push({ name: 'home', params: form })
                        localStorage.setItem('login',JSON.stringify(form))
                    } else {
                        ElMessage.error('用户名密码错误')
                    }
                } else {
                    return false
                }
                
            })
            
        }
        return () => (
            <el-form className="login" model={form} ref={formRef}>
                <el-row>
                    <el-form-item label='用户名' prop='name' rules={formRules.name}>
                        <el-input v-model={form.name}></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                <el-form-item label='密　码' prop='password' rules={formRules.password}>
                    <el-input v-model={form.password} type="password"></el-input>
                    </el-form-item>
                </el-row>
                <el-form-item className="login__btn">
                    <el-button size="large" type="primary" onClick={handleLogin}>登 录</el-button>
                </el-form-item>
            </el-form>
        )
    }
})